<template>
  <div id="user-exchange-vip-page">
    <h2 style="margin-bottom: 16px">会员码兑换</h2>
    <a-form
      layout="vertical"
      :model="formData"
      name="basic"
      autocomplete="off"
      @finish="handleSubmit"
    >
      <a-form-item label="兑换码" name="vipCode">
        <a-input
          v-model:value="formData.vipCode"
          allow-clear
          placeholder="请输入兑换码"
          style="min-width: 180px"
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" style="width: 100%" :loading="loading" html-type="submit">兑换</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
import { exchangeVipUsingPost } from '@/request/api/userController.ts'


const formData = reactive<API.VipExchangeRequest>({
})
const loading = ref(false)
const handleSubmit = async () => {
  loading.value=true;
  const { data:res } = await exchangeVipUsingPost({ ...formData })
  if (res.code === 0 && res.data) {
    console.log("兑换成功")
  } else {
    message.error("兑换失败,"+res?.message)
  }
  loading.value=false
}
</script>
<style lang="less" scoped>
#user-exchange-vip-page {
  max-width: 720px;
  margin: 0 auto;
}
</style>
